<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>客户端3</title>
		<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
		<!-- <script src="" type="text/javascript" charset="utf-8"></script> -->
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box{
				width: 500px;
				min-height: 500px;
				border: 1px solid #000;
				position: relative;
				margin-bottom: 10px;
			}
			.left{
				width: 100%;
				height: 50px;
				position: relative;
			}
			.left span{
				position: absolute;
				left: 10px;
				top: 5px;
			}
			.left p{
				position: absolute;
				top: 5px;
				right: 0;
			}
			.left em{
				position: absolute;
				top: 25px;
				left: 30px;
			}
		</style>
	</head>
	<body>
		<!-- <div id="vue01"> -->
			<div class="box">
				<!-- <div class="left">
					<span>xxx 说：</span><p>2020-06-02 22:30:33</p><br>
					<em>我是小可爱</em>
				</div> -->
			</div>
			<input type="text" id="text" />
			<input type="button" name="" id="tijiao" value="提交" />
		<!-- </div> -->
	</body>
	<script type="text/javascript">
		$(function(){
			var _webSocket = new WebSocket("ws://localhost:3000?name=lin");
			
			_webSocket.onopen = function(){
				// _webSocket.send("我是huang");
			}
			
			_webSocket.onerror = function(err){
				console.log(err);
			}
			
			
			$("#tijiao").click(function(){
				var value = $("#text").val().trim();
				if(value != ""){
					_webSocket.send(value);
				}
				$("#text").val("");
			})
			
			_webSocket.onmessage = function(mess){
				// console.log(JSON.parse(mess.data));
				var data = JSON.parse(mess.data);
				var date = new Date().toLocaleString();
				var str = `<div class="left">
					<span>${data.userName} 说：</span><p>${date}</p><br>
					<em>${data.info}</em>
				</div>`;
				$(".box").append(str);
			}
			
			/* setInterval(function(){
				
			},5000); */
		})
	</script>
</html>
